<!--产品信息 列表 组件-->
<template>
	<!-- 产品信息 -->
	<view class="information">
		<view class="row-start title">{{title}}</view>
		<!-- 信息列表 -->
		<view class="msg-list" v-for="(item,index) in dataList" :key="item.field+index">
			<view class="row-between list" style="align-items: flex-start;" v-if="item.value">
				<view :style="{flex:item.field == 'webUrl' ? 'none' : ''}">{{item.title}} :</view>
				<view class="row-div image-view"  v-if="item.image">
					<image :src="item.image" mode="aspectFill" style="width: 237upx;height: 162upx;" @click="$api.previewImage([item.image])"></image>
				</view>
				<view v-else >{{item.value}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{type: String, default: ''},
			dataList:{type: Array, default: () => []},
		},
		data() {
			return {
				
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	/* 产品信息 */
	.information {
		background: #FFFFFF;
		border-radius: 16upx;
		font-family: PingFang SC;
		color: #333333;

		.title {
			padding: 40upx 0upx;
			font-size: 32upx;
			font-weight: bold;

			&::before {
				content: " ";
				width: 5upx;
				height: 30upx;
				background: linear-gradient(-30deg, #EC2400 0%, #FF7E00 100%);
				border-radius: 3upx;
				margin-right: 30upx;
			}
		}

		/* 信息列表 */
		.msg-list {
			padding: 0upx 30upx;

			.list {
				padding: 30upx 0upx;
				border-top: 1upx solid #EEEEEE;
				font-family: PingFang SC;
				font-size: 26upx;

				view:first-of-type {
					color: #999999;
					font-weight: 500;
					flex: 1;
					margin-right: 79upx;
				}

				view:last-of-type {
					color: #333333;
					font-weight: 500;
					word-break: break-all;
				}
			}

			&:last-of-type .list {
				view:first-of-type {
					flex: none;
				}
			}

		}
	}
	.image-view{
		width: 249upx;
		height: 162upx;
		border: 1upx solid #EEEEEE;
		image {
			width: 237upx;
			height: 162upx;
		}
	}
</style>
